<template>
  <n-modal :mask-closable="true">
    <n-card style="width: 600px" title="" size="huge" role="dialog" aria-modal="true" >
      <div class="flex items-center text-2xl mb-6 gap-2">
        <SvgIcon class="text-xl text-green-400" icon="ri:link" />套餐购买
      </div>
      <div class="text-2xl mb-5">套餐名称：<span class="font-bold">{{props.paymentDetail.title}}</span></div>
      <div class="text-2xl mb-5">
        价格：<span class="font-bold text-red-400">￥{{props.paymentDetail.amount}}</span>
      </div>
      <div class="text-2xl mb-2 font-bold">支付方式</div>
      <div class="text-xl">
        <n-radio-group v-model:value="checkedPayment" name="payment">
          <!--  -->
          <n-radio class="text-xl" v-for="item in paymentList" :key="item" :value="item" :disabled="item !== '微信支付'">
            {{ item }}
          </n-radio>
        </n-radio-group>
      </div>
      <div class="my-5 flex items-center justify-center">
        <vue-qrcode :value="erweima" v-show="erweima"></vue-qrcode>
      </div>
      <!-- <n-divider /> -->
      <!-- <n-checkbox v-model:checked="isAgree">
        我已同意并阅读《xxxxxxxxxxxx协议》
      </n-checkbox> -->

      <template #footer>
        <div class="flex justify-end gap-2">
          <!-- <n-button @click="">取消</n-button> -->
          <!-- <n-button type="primary">支付订单</n-button> -->
        </div>
      </template>
    </n-card>
  </n-modal>
</template>
<script setup>
import { ref, defineProps, watch } from "vue";
import {
  NModal,
  NCard,
  NRadio,
  NRadioGroup,
  NDivider,
  NCheckbox,
  NButton,
  NImage,
  useMessage
} from "naive-ui";
import { SvgIcon } from "@/components/common";
import {fetchPay} from "@/api/user";
import VueQrcode from "vue-qrcode";
const message = useMessage()
const props = defineProps({
  paymentDetail: Object,
});

const paymentList = ref(["微信支付", "支付宝", "易支付paypal"]);
const checkedPayment = ref("");
const isAgree = ref(true);
const erweima = ref('')

watch(checkedPayment, async () => {
  try {
    const res = await fetchPay({
      amount: props.paymentDetail.amount,
      payment_method: 'wx',
      top_up_code: ''
    });
    erweima.value = res.url
  } catch (error) {
    message.error(error.data)
  }
})

</script>
